<template>
  <div class="app-container">
    <div>开发中,敬请期待。。。</div>
    <!--<panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>-->
    <!-- <User :show="userInfoShow"></User>
     <el-button type="warning" plain @click="handleUserInfo">警告按钮</el-button>-->
    <!--<div :style="{height:'800px',width:'100%'}" ref="myEchart"></div>-->
    <!--<el-row>
      <el-col :span="8" class="card-box">
        <el-card>
          <div slot="header"><span>CPU</span></div>

        </el-card>
      </el-col>

      <el-col :span="8" class="card-box">
        <el-card>
          <div slot="header"><span>内存</span></div>
        </el-card>
      </el-col>

      <el-col :span="8" class="card-box">
        <el-card>
          <div slot="header"><span>内存</span></div>
        </el-card>
      </el-col>

    </el-row>-->
  </div>
</template>

<script>
  import PanelGroup from './dashboard/PanelGroup'
  import LineChart from './dashboard/LineChart'
  import RaddarChart from './dashboard/RaddarChart'
  import PieChart from './dashboard/PieChart'
  import BarChart from './dashboard/BarChart'
  import User from '../views/components/user'
  import mixin from '../views/components/user/mixin'

 /* import echarts from "echarts";
  import '../assets/map/china' // 引入中国地图数据
  import guangdong from '../assets/map/json/province/guangdong.json' // 引入中国地图数据*/

  const lineChartData = {
    newVisitis: {
      expectedData: [100, 120, 161, 134, 105, 160, 165],
      actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  };

  export default {
    name: 'Index',
    mixins: [mixin],
    components: {
      PanelGroup,
      LineChart,
      RaddarChart,
      PieChart,
      BarChart,
      User
    },
    mounted() {
      //this.chinaConfigure();
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    data() {
      return {
        dialogVisible: false,
        lineChartData: lineChartData.newVisitis,
        chart: null
      }
    },
    methods: {
      chinaConfigure() {
        /*let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
        window.onresize = myChart.resize;
        myChart.setOption({ // 进行相关配置
          backgroundColor: '#404a59',
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: false,
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow', 'lightskyblue']
          },
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: true,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#323c48',
                borderColor: '#111'
              },
              emphasis: {
                areaColor: '#2a333d',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
            type: 'scatter',
            coordinateSystem: 'geo' // 对应上方配置
          },
            {
              name: '启动次数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: [{
                "name": "北京",
                "value": 599
              }, {
                "name": "上海",
                "value": 142
              }, {
                "name": "黑龙江",
                "value": 44
              }, {
                "name": "深圳",
                "value": 92
              }, {
                "name": "湖北",
                "value": 810
              }, {
                "name": "四川",
                "value": 453
              },
                {name: '香港', value: 453},
                {name: '澳门', value: 453}
              ]
            }
          ]
        });
        let _this=this;
        myChart.on('click', function (params) {
          console.log(params);
          echarts.registerMap('guangdong', guangdong);
          myChart.setOption( {
            visualMap: {
              min: 0,
              max: 10,
              text: ['High', 'Low'],
              seriesIndex: [1],                   //必须设置此项,否则会覆盖标注点颜色
              realtime: true,
              calculable: true,
              inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
              },
              textStyle: {
                color: 'lime'
              }
            },
            geo: {
              map: 'guangdong',
              roam: true,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#3ebee6'                        //省份字体颜色
                  }
                }
              },
              itemStyle: {
                normal: {
                  borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis: {
                  areaColor: null,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
            series: [
              {
                roam: true,
                type: 'scatter',
                coordinateSystem: 'geo'
              }
            ]
          });
        });*/
      },
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
